</> 技術筆記Tech Notes

Velo - 靜態部落格生成器

為什麼我會打造 Velo?

在現代要建立網站,有各式各樣的選擇。對許多開發者或內容創作者來說,靜態網站生成器(Static Site Generator, SSG)以其速度快、安全性佳且易於部署等特色,成了搭建個人博客、專案文件或小型網站的理想選擇。從 Jekyll、Hugo 到 Next.js,市面上早已存在許多成熟且強大的工具。

但你是否也有過類似的經驗:在大量的工具間來回比較,甚至都試用過好幾個,最後卻發現沒有任何一個工具能完全符合自己的需求?

當現有的輪子並不適合自己

我在啟動新專案時就碰上了這種狀況。我想找一款能貼合自己特定工作流程和客製化需求的靜態網站生成器,但當我評估過市面上主流的選項後,卻發現它們不是過於複雜,內建了許多我用不到的功能;就是太僵化,難以進行客製化的調整。

結果是,我花在「魔改」現有工具上的時間,甚至遠超過實際產出內容的時間。這讓我忍不住反思:與其不斷地遷就別人設計好的工具,何不乾脆自己打造一個最符合需求的輪子呢?

這個想法最終促使我開發了 Velo,一個專為解決我自己需求所設計的靜態網站生成器。它的名字取自「Velocity」,象徵著對速度與效率的追求。Velo 的核心理念就是:「簡潔,但功能豐富。」

Typora 是我平常最習慣使用的 Markdown 編輯器。當文章中有引用圖片時,它能自動建立一個以「文章檔案名稱 + .assets」命名的目錄來儲存圖片。如果改用其他的靜態網站生成器,我就必須調整圖片的引用方式,這代表我可能得改變現有的文章結構,甚至連編輯器都得換掉。這種改變並不是我想要的,因此才會決定打造一個真正適合自己的「輪子」。

專注在部落格的核心體驗

Velo 是基於 C# 13.0.NET 9.0 框架打造的高效能靜態網站生成器,專注於提供一個現代化、易用且可高度客製化的寫作及閱讀環境。

它的設計哲學是摒除不必要的複雜性,同時將部落格最需要的功能做到位。從 Markdown 文章的解析、分類與標籤,到現代感十足的卡片式介面和即時搜尋,Velo 從寫作到發布的每個細節都兼顧到。

Velo 的特色

在開發 Velo 時,我特別專注於實現以下幾個我認為至關重要的功能:

  1. 強大的內容管理 Velo 完整支援 Markdown,能自動解析 Front Matter 中的標題、日期、分類與標籤,更貼心的是,即使檔案缺少 Front Matter,也能自動補上模板並生成文章摘要,大幅簡化了創作前的繁瑣步驟。

  2. 靈活的模板系統 Velo 使用 Handlebars 語法,提供極大的客製化空間。你能完全覆蓋內建的 index.htmlpost.html 模板,創造專屬的風格,同時仍保留 Velo 的強大後端處理能力。

  3. 現代化的互動功能 這是我自己非常自豪的一點。Velo 不僅僅是生成靜態頁面,更內建了許多現代網站應具備的互動特色:

    • 即時搜尋:不需後端,透過前端即可快速搜尋文章標題、標籤及分類。

    • 樹狀分類導航:支援多層次分類,以展開/收合的樹狀結構呈現,清晰易懂。

    • 文章內目錄 (TOC):能自動抓取文章內的標題 (H1, H2…),自動生成頁面目錄,讓讀者快速跳轉。

    • 卡片式設計與響應式佈局:採用漸層、陰影等現代化視覺設計,並能完美適應桌面、平板和手機。

  4. 貼心的使用者體驗優化 細節往往決定一個產品的成敗。例如,在文章頁面中,首頁連結和分類側邊欄是固定不動的,閱讀時不會因滾動而消失;「返回頂端」按鈕會智能定位在內容的右側,避免遮擋內容。這些設計都是為了讓閱讀體驗更加順暢。

  5. 高效的開發與部署 由於基於 .NET 技術,Velo 可以輕鬆編譯成跨平台(Windows、Linux、macOS)的單一執行檔,無須安裝其他執行環境。此外,專案還內建了自動發布腳本,一鍵就能打包所有平台版本,並按日期自動進行版本管理,讓部署變得前所未有地簡單。

結語

或許有人覺得從頭打造靜態網站生成器是在「重複造輪子」,但這次經驗讓我深刻體會到,當你找不到完全合適的工具時,自己動手打造一個真正了解自己需求的工具,會帶來極大的收穫。Velo 不只是解決了我的實際需求,更是一趟充滿樂趣與學習的旅程。

如果你也對現有的靜態網站生成器感到不滿,或對 Velo 的理念感興趣,歡迎到我的 GitHub 上查看這個專案、下載試用,甚至一起參與貢獻!

讓寫作變得更簡單,讓部落格更加精彩!